<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
</head>
<body>

<!--
    事件修饰符
    鼠标事件:
    .top  停事件的行为 可以解决事件冒泡
    .self  只触发自己的事件行为
    .once  事件只触发一次

    键盘事件:
    @keyup   按键弹起
    @keyup.enter  回车键的弹起
    @keyup.up    方向键 上
    @keyup.left
    @keyup.right
    @keyup.down
    @keyup.space
-->
<div id="app">

    <div @click.self="boxClick" style="width: 200px;height: 200px;background-color: red">
        <button @click.once="btnClick">普通按钮</button>
    </div>

    <p><input type="text" placeholder="请输入信息" v-model="info" @keyup.enter="showInfo"></p>
</div>

<script src="../js/vue.js"></script>

<script>
    const vm = new Vue({
        el:'#app',
        data:{
            info:""
        },
        methods:{
            boxClick(){
                console.log("box 被单击")
            },
            btnClick(){
                console.log("btn 被单击")
            },
            showInfo(){
                console.log(this.info)
            }
        }
    })
</script>
</body>
</html>
